{% extends "layout/manage.html" %}
{% load static %}

{% block css %}
    <link rel="stylesheet" href="{% static "css/project_list.css" %}">
{% endblock %}

{% block title %}
    项目
{% endblock %}

{% block content %}
    <div class="container-fluid project">
        <a href="" class="btn btn-primary" data-toggle="modal" data-target="#addProject">
            <i class="fa fa-plus-circle" aria-hidden="true"></i> 新建项目</a>
    </div>
    <!-- 添加项目的模态框 -->
    <div class="modal fade" id="addProject" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">新 建 项 目</h4>
                </div>
                <div class="modal-body">
                    <form id="addForm">
                        {% for field in form %}
                            {% csrf_token %}
                            <div class="form-group">
                                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                {{ field }}
                                <span class="error_msg"></span>
                            </div>

                        {% endfor %}
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button id="onSubmit" type="button" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading"><i class="fa fa-star" aria-hidden="true"></i> 星标</div>
        <div class="panel-body">
            {% for item in projects.star %}
                <div class="item">
                    <a href="{% url 'dashboard' project_id=item.value.id %}" class="title"
                       style="background-color: {{ item.value.get_color_display }};">{{ item.value.project_title }}</a>
                    <div class="info">
                        <div>
                            <a href="{% url 'project_unstar' id=item.value.id project_type=item.type %}">
                                <i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e"></i>
                            </a>
                            <span>{{ item.value.created_by.username }}</span>
                        </div>
                        <div>
                            <i class="fa fa-user-o" aria-hidden="true"></i>
                            <span>{{ item.value.participant }}</span>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading"><i class="fa fa-list" aria-hidden="true"></i> 我创建的项目</div>
        <div class="panel-body">
            {% for item in projects.my %}
                <div class="item">
                    <a href="{% url 'dashboard' project_id=item.id %}" class="title"
                       style="background-color: {{ item.get_color_display }};">{{ item.project_title }}</a>
                    <div class="info">
                        <div>
                            <a href="{% url 'project_star' id=item.id project_type='my' %}">
                                <i class="fa fa-star" aria-hidden="true" style="color: #d5d5d5;"></i>
                            </a>
                            <span>{{ item.created_by.username }}</span>
                        </div>
                        <div>
                            <i class="fa fa-user-o" aria-hidden="true"></i>
                            <span>{{ item.participant }}</span>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading"><i class="fa fa-handshake-o" aria-hidden="true"></i> 我参与的项目</div>
        <div class="panel-body">
            {% for item in projects.join %}
                <div class="item">
                    <a href="{% url 'dashboard' project_id=item.id %}" class="title"
                       style="background-color: {{ item.get_color_display }};">{{ item.project_title }}</a>
                    <div class="info">
                        <div>
                            <a href="{% url 'project_star' id=item.id project_type='join' %}">
                                <i class="fa fa-star" aria-hidden="true" style="color: #d5d5d5"></i>
                            </a>
                            <span>{{ item.created_by.username }}</span>
                        </div>
                        <div>
                            <i class="fa fa-user-o" aria-hidden="true"></i>
                            <span>{{ item.participant }}</span>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

{% endblock %}


{% block js %}
    <script>
        // jQuery函数，绑定一个点击事件到id为onSubmit的元素上
        $(() => {
            bindSubmit()
        })

        // 函数，绑定表单提交事件
        function bindSubmit() {
            // 点击事件，通过Ajax发送POST请求
            $("#onSubmit").click(() => {
                $.ajax({
                    url: "{% url 'project_list' %}", // 请求的URL，用于提交表单数据
                    type: "POST", // 请求方法为POST
                    data: $("#addForm").serialize(), // 提交的表单数据，通过序列化获取
                    dataType: "JSON", // 返回的数据类型为JSON
                    success: function (res) { // 请求成功后的回调函数
                        console.log(res) // 打印返回的数据
                        if (res.status) { // 如果返回的状态为true
                            location.href = location.href // 重新加载当前页面
                            // location.reload() 两个都是刷新一下页面，可以把创建的项目显示到页面
                        } else { // 如果返回的状态为false
                            $.each(res.error, function (key, value) { // 遍历错误信息
                                $("#id_" + key).next().text(value[0]) // 将错误信息展示在对应字段的下一个兄弟元素上
                            })
                        }
                    }
                })
            })
        }

    </script>
{% endblock %}